<template>
    <div class="ej-box" v-if="emoji.popEmoji" :style="style">
        <div class="ej-list" ref="box">
            <img class="ej-item" :src="item" v-for="(item, i) in EmojiList" :key="i" @click="onChoose(i)" />
        </div>
        <div class="arow" :style="{ left: offset }"></div>
    </div>
</template>

<script lang="ts" setup>
import { useEmoji } from "@/stores/emoji";
import { storeToRefs } from "pinia";
import { onMounted, ref, watch, reactive, computed } from "vue";

// import zan from "@/assets/emoji/zan.png"
// import shit from "@/assets/emoji/shit.png"
// import hale from "@/assets/emoji/hale.png"
// import love from "@/assets/emoji/love.png"
// import laugh from "@/assets/emoji/laugh.png"
// import bom from "@/assets/emoji/bom.png"
// import rocket from "@/assets/emoji/rocket.png"
import { Bus, UI_EMOJI } from "@/connetion/Bus";
import { EmojiList } from "./emoji";

const emoji = useEmoji();
const { x, y } = storeToRefs(emoji);
const box = ref<any>(null);
const left = ref(0);
const top = ref(0);
const offset = ref("");

const style = computed(() => {
    return {
        left: left.value + "px",
        top: top.value + "px"
    };
});

watch(
    () => emoji.popEmoji,
    val => {
        if (val) {
            setTimeout(() => {
                let w = box.value.clientWidth;
                let h = box.value.clientHeight;
                const max = window.innerWidth - w - 20;
                console.log(w, h, "size", style);
                left.value = x.value - w * 0.5;
                if (left.value > max) {
                    left.value = max;
                }
                top.value = y.value - h - 30;
                offset.value = x.value - left.value - 12 + "px";
                window.addEventListener("click", onClick);
            }, 30);
        } else {
            window.removeEventListener("click", onClick);
        }
    }
);

const onClick = (e: MouseEvent) => {
    if (!box.value) return;
    if (!box.value.contains(e.target)) {
        emoji.changePopEmoji(false);
    }
};

const onChoose = (i: any) => {
    emoji.changePopEmoji(false);
    Bus.emit(UI_EMOJI, i);
};
</script>

<style lang="less" scoped>
.ej-box {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8;
    opacity: 0;
    animation: fade 0.2s ease-in 0.06s;
    animation-fill-mode: forwards;
    transform: translateY(10px);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));

    .ej-list {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 320px;
        height: 40px;
        gap: 12px;
        background: #2b3139;
        border-radius: 6px;
        box-shadow: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.8));

        // border: 1px solid #2F363E;
        .ej-item {
            object-fit: contain;
            width: 30px;
            height: 30px;
            opacity: 0.9;
            transition: all 200ms;
            cursor: pointer;

            &:hover {
                opacity: 1;
                transform: scale(1.08);
            }
        }
    }

    .arow {
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #2b3139;
    }
}

@keyframes fade {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
